<template>
  <div style="height:1000px">
    <b-navbar toggleable="lg" fixed="top" variant="light">
      <b-navbar-brand>
        <b-img :src="logo" class="logo" alt="WineForYou Logo"></b-img>
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" class="navigation" is-nav>
        <b-navbar-nav>
          <b-nav-item>首页</b-nav-item>
          <b-nav-item>产品</b-nav-item>
          <b-nav-item>新闻</b-nav-item>
          <b-nav-item>关于我们</b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form class="search">
            <b-form-input size="sm" class="mr-sm-2" v-model="searchWord" placeholder="输入关键词搜索"></b-form-input>
            <b-button size="sm" @click.prevent="search" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>

          <b-nav-item-dropdown text="语言" right>
            <b-dropdown-item>中文</b-dropdown-item>
            <b-dropdown-item>EN</b-dropdown-item>
          </b-nav-item-dropdown>
          <!--  <b-nav-item-dropdown right>
            <template v-slot:button-content>
              <b>用户</b>
            </template>
            <b-dropdown-item href="#">个人中心</b-dropdown-item>
            <b-dropdown-item href="#">退出</b-dropdown-item>
          </b-nav-item-dropdown>-->
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
export default {
  components: {},
  data() {
    return {
      logo,
      searchWord: ''
    }
  },
  methods: {
    search() {
      console.log(1, this.searchWord)
    }
  }
}
</script>

<style scoped  >
.logo {
  width: 64px;
  border-radius: 50%;
}
.navigation {
  margin: 0 120px;
}
.navigation .nav-item {
  min-width: 80px;
}
.search {
  padding-right: 19px;
}
</style>
